<template>
    <div>
        <div class="page Router" style="overflow-x: hidden;">
            <div>
                <HeaderS :screenWidth="screenWidth" />
            </div>
            <div :class="{ 'page-content': screenWidth > 1000, 'h5-content': screenWidth <= 1000 }">
                <div class="main">
                    <div class="index-banner">
                        <div class="video" :style="{'min-height': dataInfo.banner && dataInfo.banner.video?'':'56.51042vw'}">
                            <div>
                                <video v-if="dataInfo.banner && dataInfo.banner.video" muted="muted" :autoplay="true" :loop="true" :playsinline="true" 
                                    :x5-playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h5"
                                    :x5-video-player-fullscreen="true" :webkit-playsinline="true">
                                    <source :src="dataInfo.banner.video"
                                        type="video/mp4">
                                </video>
                            </div>
                        </div>
                        <div class="swiper-container" style="display: none;">
                            <div class="swiper-wrapper"></div>
                        </div>
                        <div :class="{ 'scenic-area': true, 'scenic-h5': screenWidth <= 1000 }">
                            <div class="scenic-swiper-box">
                                <div class=" swiper-container2 ">
                                    <div class="swiper-wrapper" v-if="dataInfo && dataInfo.banner_bottom">
                                        <div v-for="item in dataInfo.banner_bottom" :key="item.id" class="swiper-slide">
                                            <div class="list-box" @click="openUrl(item.id, item.url)">
                                                <div class="img-url"
                                                    :style="{ backgroundImage: 'url(' + item.img + ')' }">
                                                    <div class="mask"></div>
                                                </div>
                                                <div class="text-wrap">
                                                    <div class="time">{{ item.post_title }}</div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div v-if="screenWidth > 1000" class="prev prev2 swiper-button-disabled" tabindex="0"
                                role="button" aria-label="Previous slide" aria-disabled="true"><i
                                    class="l-iconfont">&#xe685;</i>
                            </div>
                            <div v-if="screenWidth > 1000" class="next next2" tabindex="0" role="button"
                                aria-label="Next slide" aria-disabled="false"><i class="l-iconfont">&#xe687;</i></div>
                        </div>
                    </div>
                    <div>
                        <div class="wrap">
                            <div class="main">
                                <div class="nav-wrap" v-show="screenWidth > 1000">
                                    <div class="nav-wrap2"></div>

                                    <div class="prev prev1" tabindex="0" role="button" aria-label="Previous slide"><i
                                            class="l-iconfont">&#xe685;</i></div>
                                    <div class="next next1" tabindex="0" role="button" aria-label="Next slide"><i
                                            class="l-iconfont">&#xe687;</i></div>
                                </div>
                                <div class="scenic-recommended-list">
                                    <div v-if="screenWidth > 1000" class="swiper-container swiper-container1">
                                        <div class="swiper-wrapper" v-if="dataInfo && dataInfo.xa_wh">
                                            <div v-for="item in dataInfo.xa_wh" :key="item.id"
                                                class=" swiper-slide swiper-slide-active" style="width: 100%;">
                                                <div class="recommended-item">
                                                    <div class="recommend-info">
                                                        <div class="about"> History of Xi'an </div>
                                                        <div class="recommended-title line1"> {{ item.name }}
                                                        </div>
                                                        <div class="decoration"> <img src="@/assets/img/doot.png"
                                                                alt="">
                                                        </div>
                                                        <p class="desc line3"> </p>
                                                        <p class="see-detail" @click="getOpen(item.id)"> 了解更多 <i class="l-iconfont">&#xe62d;</i>
                                                        </p>
                                                    </div>
                                                    <div class="recommend-pic">
                                                        <div v-if="item.article" class="img-url"
                                                            :style="{ backgroundImage: 'url(' + item.article.more + ')' }">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                        <div v-show="screenWidth <= 1000" class="swiper-pagination"></div>
                                    </div>
                                    <div v-show="screenWidth <= 1000" class="swiper-container3 swiper-container">
                                        <div class="swiper-wrapper" style="" v-if="dataInfo && dataInfo.xa_wh">
                                            <div v-for="item in dataInfo.xa_wh" :key="item.id"
                                                class=" swiper-slide swiper-slide-active" style="width: 100%;">
                                                <div class="recommended-item">
                                                    <div class="recommend-pic">
                                                        <div v-if="item.article" class="img-url"
                                                            :style="{ backgroundImage: 'url(' + item.article.more + ')' }">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                        <div v-show="screenWidth <= 1000" class="swiper-pagination"></div>
                                    </div>
                                    <div class="text-wrap" v-if="screenWidth <= 1000">
                                        <div class="about"> History of Xi'an </div>
                                        <div class="name line1" v-if="dataInfo && dataInfo.xa_wh"> {{ dataInfo.xa_wh[current2 - 1].name }} </div>
                                        <p class="desc line3"> </p>
                                        <p class="more" v-if="dataInfo && dataInfo.xa_wh" @click="getOpen(dataInfo.xa_wh[current2 - 1].id)"> 了解更多</p>
                                    </div>
                                    <div class="sroll-box" v-show="screenWidth > 1000" v-if="dataInfo && dataInfo.xa_wh">
                                        <span> {{ String(current).padStart(2, '0') }} </span>
                                        <div class="progree-bar" >
                                            <p :style="{ height: (current / dataInfo.xa_wh.length * 100) + '%', maxHeight: '100%' }"
                                                class="progree-barP"></p>
                                        </div>
                                        <span > {{ String(dataInfo.xa_wh.length).padStart(2, '0') }} </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="deed">
                            <img v-if="screenWidth > 1000" src="@/assets/img/home-wzxa.dd9e468f.jpg" class="banner">
                            <div class="main">
                                <div class="left">
                                    <div class="about"> {{ screenWidth > 1000 ? "Visit Xi'an" : " Play Xi'an " }} </div>
                                    <div class="title line1"> 玩转西安 </div>
                                    <div class="desc line3">
                                        <p>丰富多彩的创意行程，让你的旅途更加有趣！</p>
                                        <p v-if="screenWidth > 1000">多种玩法推荐，多条旅游线路供你选择；准备充足，旅游满足，让旅行更简单。</p>
                                    </div>
                                </div>
                                <div class="right">
                                    <div class="right-top">
                                        <div class="box" @click="getOpen2('scenic-list')">
                                            <div class="scenic option">
                                                <i class="l-iconfont">&#xe602;</i>
                                                <p>景点</p>
                                            </div>
                                        </div>
                                        <div class="box ml30" @click="getOpen2('food-list')">
                                            <div class="food option">
                                                <i class="l-iconfont">&#xe60c;</i>
                                                <p>美食</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="right-bottom">
                                        <div class="box" @click="getOpen2('hotel-list')">
                                            <div class="hotel option">
                                                <i class="l-iconfont">&#xe89b;</i>
                                                <p>住宿</p>
                                            </div>
                                        </div>
                                        <div class="box ml30" @click="getOpen2('shopping-list')">
                                            <div class="buy option">
                                                <i class="l-iconfont">&#xe617;</i>
                                                <p>购物</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="video">
                            <div class="title-wrap">
                                <div class="about"> Information </div>
                                <div class="name"> 热门资讯信息 </div>
                                <div class="summary"> 快速了解官方新闻动态和旅游活动相关资讯，以便于您的旅游出行 </div>
                            </div>
                            <div class="list" v-if="dataInfo && dataInfo.hot_article" >
                                <div @click="openUrl(item.id, item.url)" v-for="(item, index) in dataInfo.hot_article" :key="item.id" class="item"
                                    v-show="index < 3">
                                    <div class="img-url" :style="{ backgroundImage: 'url(' + item.img + ')' }">
                                    </div>
                                    <div class="text-wrap">
                                        <div class="time"> {{ item.date }} </div>
                                        <div class="title-line">
                                            <div class="title line1"> {{ item.post_title }} <p class="line"></p>
                                            </div>
                                        </div>
                                        <div class="summary line2"> </div>
                                        <div class="detail"> 查看详情 <i class="l-iconfont">&#xe62d;</i></div>
                                    </div>
                                </div>

                            </div>
                            <div class="list" v-else :style="{minHeight:dataInfo.hot_article?'':'30vw'}"></div>
                        </div>
                    </div>
                    <div>
                        <div class="friends">
                            <div class="wrap">
                                <div class="title"> 友情链接 </div>
                                <div class="list-wrap" v-if="dataInfo && dataInfo.link">
                                    <div v-for="item in dataInfo.link" :key="item.id" class="list-box"
                                       @click="openUrl(item.id,item.url)"><img :src="item.image" alt=""></div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <FooterS :screenWidth="screenWidth" />
        </div>
    </div>
</template>
<script>
import Swiper from 'swiper'
export default ({
    data() {
        return {
            xian: ['西安简介', '西安的景', '西安的歌', '西安的美'],
            current: 1,
            current2: 1,
            showTop: false,
            swiper2: '',
            swiper: '',
            swiper3: '',
            dataInfo: ''
        }
    },

    computed: {
        screenWidth() {
            return this.$store.getters.screenWidth
        }
    },

    created() {
        this.$i18n.locale ="zh"
        this.getData()
    },

    methods: {
        getOpen2(path){
            this.$router.push(path)
        },
        getOpen(id){
            console.log(id);
            
            if(id==49){
                this.$router.push({
                    path: 'survey-details',
                    query: {
                        id: id
                    }
                })
            }else{
                this.$router.push({
                    path: 'culture-xian',
                    query: {
                        tag: id
                    }
                })
            }
        
        },
        openUrl(id, url) {
            if (url) {
                this.$confirm('','温馨提示',{
                message:this.$store.state.cnode,
                dangerouslyUseHTMLString:true,
                confirmButtonText: '继续访问',
                cancelButtonText: '放弃',
                center:true
            })
          .then(_ => {
            window.open(url, '_blank');
          })
          .catch(_ => {})
            } else {
                this.$router.push({
                    path: 'news-details',
                    query: {
                        id: id
                    }
                })
            }
        },
        getData() {
            this.$api.getIndex({ lang: this.$i18n.locale }).then((res) => {
                if (res.data.code == 1) {
                    this.dataInfo = res.data.data
                    let xa_wh = res.data.data.xa_wh
                    this.xian = []
                    xa_wh= xa_wh.filter(i => {
                        return i.id!=56
                    });
                    xa_wh.forEach(i => {
                        if(i.id!=56){
                            this.xian.push(i.name)
                        }
                    });
                    this.dataInfo.xa_wh = xa_wh
                    
                    sessionStorage.setItem('weatherData',res.data.data.weatherData)
                    this.$nextTick(() => {
                        this.getSwiper()
                        this.handleResize()
                    })

                }
            })
        },
        getSwiper() {
            this.swiper2 = new Swiper('.swiper-container2', {
                slidesPerView: 4,
                paginationClickable: true,
                spaceBetween: 20,
                navigation: {
                    nextEl: '.next2',
                    prevEl: '.prev2',
                },
            });
        },
        getSwiper2() {
            let that = this
            this.swiper = new Swiper('.swiper-container1', {
                loop: true,
                navigation: {
                    nextEl: '.next1',
                    prevEl: '.prev1',
                },
                autoplay: {
                    delay: 8000,
                    disableOnInteraction: false,
                },
                pagination: {
                    // el: '.progree-bar',
                    // type: 'progressbar',
                    // progressbarOpposite: true,
                    el: '.nav-wrap2',
                    clickable: true,
                    renderBullet: function (index, className) {
                        return '<span class="nav-list ' + className + '">' + (that.dataInfo.xa_wh[index].name) + '</span>';
                    },
                },
                on: {
                    slideChangeTransitionStart: function () {
                        if (this.activeIndex < (that.xian.length + 1)) {
                            that.current = this.activeIndex
                        } else {
                            that.current = 1
                        }
                    }
                },
            });
            this.$nextTick(() => {
                const swiper = this.swiper
                swiper.update;
            })
        },
        getSwiper3() {
            let that = this
            this.swiper = new Swiper('.swiper-container3', {
                loop: true,
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: false,
                },
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                on: {
                    slideChangeTransitionStart: function () {
                        if (this.activeIndex < (that.xian.length + 1)) {
                            that.current2 = this.activeIndex
                        } else {
                            that.current2 = 1
                        }
                    }
                },
            });
            this.$nextTick(() => {
                const swiper = this.swiper
                swiper.update;
            })
        },
        handleResize() {

            this.getSwiper2()
            this.getSwiper3()

        },



    },
})

</script>

<style lang="scss" >

.showQr {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .2);
    display: none;
}

.showQr #qrcode {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 260px;
    height: 260px;
    border-radius: 5px;
    padding: 30px;
    box-sizing: border-box;
    background: white;
    transform: translate(-50%, -50%);
}

.h5 .right-side-list .isShowTop {
    opacity: 1 !important;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.h5 .right-side-list .consult {
    display: block;
    width: 0.8rem;
    height: 0.8rem;
    background: #e5e5e5;
    text-align: center;
    line-height: 0.8rem;
    border-radius: 0.1rem;
    margin-bottom: 0.1rem;
}

.h5 .right-side-list .consult i {
    color: #fff;
    font-size: 0.36rem;
}

.h5 .right-side-list .consult:active {
    background: #e31c1c;
}

.h5 .right-side-list .top-item {
    opacity: 0;
    width: 0.8rem;
    height: 0.8rem;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.h5 .right-side-list .top-item .to-top {
    display: block;
    width: 0.8rem;
    height: 0.8rem;
    background: #e5e5e5;
    text-align: center;
    line-height: 0.8rem;
    border-radius: 0.1rem;
}

.h5 .right-side-list .top-item .to-top-hover {
    display: none;
    width: 0.8rem;
    height: 0.8rem;
    background: #e31c1c;
    text-align: center;
    line-height: 0.8rem;
    border-radius: 0.1rem;
}

.h5 .right-side-list .top-item:active .to-top {
    display: none;
}

.h5 .right-side-list .top-item:active .to-top-hover {
    display: block;
}

.h5 .right-side-list .wechat,
.h5 .right-side-list .sina {
    width: 0.8rem;
    height: 0.8rem;
    margin-bottom: 0.02rem;
}

.h5 .right-side-list .wechat img,
.h5 .right-side-list .sina img {
    width: 0.8rem;
    height: 0.8rem;
}





video {
    width: 100%;
    height: 100%;
    -o-object-fit: fill;
    object-fit: fill;
}



.index-banner {
    width: 100%;
    position: relative;
}

.index-banner .scenic-area {
    position: absolute;
    bottom: 0px;
    z-index: 100;
    height: 15vw;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
}

.index-banner .scenic-area .prev {
    position: absolute;
    left: 2.08333vw;
    bottom: 6.25vw;
    cursor: pointer;
}

.index-banner .scenic-area .next {
    position: absolute;
    right: 2.08333vw;
    bottom: 6.25vw;
    cursor: pointer;
}

.index-banner .scenic-area .prev i,
.index-banner .scenic-area .next i {
    font-size: 2.08333vw;
    color: #fff;
}

.index-banner .scenic-area .scenic-swiper-box {
    width: -webkit-calc(100% - 12.76042vw);
    width: calc(100% - 12.76042vw);
    margin-left: 7.34375vw;
    height: 10.83333vw;
    margin-top: 2.08333vw;
    overflow: hidden;
}

.index-banner .scenic-area .scenic-swiper-box .swiper-container {
    position: relative;
    height: 10.83333vw;
}
.index-banner .scenic-area .scenic-swiper-box .swiper-container3 {
    position: relative;
    height: 10.83333vw;
}
.index-banner .scenic-area .scenic-swiper-box .swiper-container3 {
    position: relative;
    height: 10.83333vw;
}

.index-banner .scenic-area.scenic-h5 .time{
    display: none;
}
.index-banner .scenic-area.scenic-h5 .scenic-swiper-box {
    width: -webkit-calc(100% - 12.91667vw);
    width: calc(100% - 12.91667vw);
    margin-top: 2.08333vw;
}

.index-banner .scenic-area.scenic-h5 .scenic-swiper-box .swiper-container {
    position: relative;
    height: 16.04167vw;
}

.index-banner .scenic-area.scenic-h5 .scenic-swiper-box .swiper-container3 {
    position: relative;
    height: 16.04167vw;
}
.index-banner .scenic-area .list-box {
    display: inline-block;
    width: 19.58333vw;
    height: 10.83333vw;
    cursor: pointer;
    position: relative;
    border-radius: 0.26042vw;
    overflow: hidden;
}

.index-banner .scenic-area .list-box .img-url {
    width: 100%;
    height: 100%;
    position: relative;
}

.index-banner .scenic-area .list-box .img-url .mask {
    width: 100%;
    height: 100%;
    position: relative;
    background: rgba(0, 0, 0, 0.2);
}

.index-banner .scenic-area .list-box .img-url .mask i {
    font-size: 1.66667vw;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.index-banner .scenic-area .list-box .text-wrap {
    position: absolute;
    width: -webkit-calc(100% - 2.08333vw);
    width: calc(100% - 2.08333vw);
    color: #ffffff;
    bottom: 1.04167vw;
    padding: 0 1.04167vw;
}

.index-banner .video {
    width: 100%;
    height: 100%;
    padding-bottom: 0;
    background: #fff;
}

.index-banner .swiper-slide {
    width: 100vw;
    height: 100vh;
}

.index-banner .img {
    width: 100%;
    height: 100%;
}


.index-banner .swiper-pagination-bullets {
    bottom: 2.08333vw;
}

.index-banner .swiper-pagination-bullet {
    width: 2.08333vw;
    height: 0.3125vw;
    position: relative;
    background: rgba(0, 0, 0, 0.5);
    margin: 0 0.52083vw;
    border-radius: 0;
    opacity: 1;
}

.index-banner .swiper-pagination-bullet-active {
    background: #e31c1c;
}



.wrap {
    width: 100%;
    height: 46.51042vw;
    overflow: hidden;
    background: #fff;
}

.wrap .main {
    width: 79.27083vw;
    margin: 7.23958vw auto 0;
}

.wrap .nav-wrap {
    text-align: right;
    margin-bottom: 2.03125vw;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: end;
    justify-content: flex-end;
    -webkit-box-align: baseline;
    align-items: baseline;
}

.wrap .nav-wrap .prev,
.wrap .nav-wrap .next {
    margin-left: 2.08333vw;
    cursor: pointer;
    color: #999;
}

.wrap .nav-wrap .prev i,
.wrap .nav-wrap .next i {
    font-size: 0.72917vw;
}

.wrap .nav-wrap .prev:hover,
.wrap .nav-wrap .next:hover {
    color: #333;
}

.wrap .nav-wrap .nav-list {
    white-space: nowrap;
    display: inline-block;
    font-size: 0.83333vw;
    color: #333 ;
    margin-left: 5.20833vw;
    position: relative;
    cursor: pointer;
}
.swiper-pagination-bullet{
    width: auto;
    height: auto;
    background-color: transparent;
    color: #333 ;
    opacity: 1;
}
.swiper-pagination-bullet-active{
    color: #e31c1c !important;
}
.swiper-pagination-bullet-active::before{
    border-color: #e31c1c !important;
}
.wrap .nav-wrap .nav-list::before {
    content: "";
    width: 0.52083vw;
    height: 0.52083vw;
    border: solid 1px #666;
    position: absolute;
    top: 0.3125vw;
    left: -1.04167vw;
    border-radius: 50%;
}

.wrap .nav-wrap .nav-list:hover {
    color: #e31c1c;
}

.wrap .nav-wrap .nav-list:hover::before {
    border-color: #e31c1c;
}

.wrap .nav-wrap .active {
    color: #e31c1c;
}

.wrap .nav-wrap .active::before {
    border-color: #e31c1c;
}

.wrap .scenic-recommended-list {
    padding-left: 1.58vw;
    position: relative;
}

.wrap .scenic-recommended-list .swiper-container {
    position: relative;
}
.wrap .scenic-recommended-list .swiper-container3 {
    position: relative;
}
.wrap .sroll-box {
    width: 1.14583vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    text-align: center;
}

.wrap .sroll-box span {
    font-size: 0.9375vw;
    color: #333;
    font-weight: bold;
    line-height: 1;
}

.wrap .sroll-box .progree-bar {
    height: 25.41667vw;
    border-left: 1px dashed #d4d4d4;
    margin: 0.52083vw 0 0.52083vw 0.52083vw;
    position: relative;
    background-color: transparent;
    
}

.wrap .sroll-box .progree-bar p {
    position: absolute;
    width: 0.26042vw;
    display: block;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    background-color: #e31c1c;
    border-radius: 0.15625vw;
    top: 0;
    left: 0;
    margin-left: -0.15625vw;
}

.wrap .recommended-item {
    height: 28.125vw;
    display: -webkit-box;
    display: flex;
    width: 100%;
}

.wrap .recommended-item .recommend-pic {
    width: 53.125vw;
    height: 28.125vw;
    overflow: hidden;
    margin-right: 5px;
}

.wrap .recommended-item .recommend-pic .img-url {
    width: 100%;
    height: 100%;
}

.wrap .recommended-item .recommend-info {
    padding: 2.91667vw 4.47917vw 0 4.53125vw;
    -webkit-box-flex: 1;
    flex: 1;
}

.wrap .recommended-item .recommend-info .about {
    font-size: 0.72917vw;
    color: #333;
}

.wrap .recommended-item .recommend-info .recommended-title {
    font-size: 1.5625vw;
    font-weight: bold;
    color: #333333;
    margin: 1.30208vw 0 3.125vw;
}

.wrap .recommended-item .recommend-info .see-detail {
    color: #999;
    font-size: 0.72917vw;
    cursor: pointer;
}

.wrap .recommended-item .recommend-info .see-detail .cloud-icon {
    font-size: 0.625vw;
    margin-left: 0.26042vw;
    color: #999;
}

.wrap .recommended-item .recommend-info .see-detail:hover {
    color: #e31c1c;
}

.wrap .recommended-item .recommend-info .see-detail:hover i {
    color: #e31c1c;
}

.wrap .recommended-item .recommend-info .decoration {
    width: 4.53125vw;
}

.wrap .recommended-item .recommend-info .decoration img {
    width: 100%;
}

.wrap .recommended-item .recommend-info .desc {
    font-size: 0.72917vw;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
    line-height: 1.04167vw;
    overflow: hidden;
    margin: 3.59375vw 0 2.08333vw;
}

.h5 {
    font-size: 0;
    padding: 0.8rem 0.3rem 0.5rem;
    background: #fff;
}

.h5 .swiper-wrap {
    position: relative;
}

.h5 .swiper-wrap .img-box {
    width: 6.9rem;
    height: 3.65rem;
}

.h5 .swiper-wrap .img-box img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.h5 .swiper-wrap .text-wrap {
    text-align: center;
}

.h5 .swiper-wrap .text-wrap .about {
    margin: 0.55rem 0 0.1rem;
    color: #999;
    font-size: 0.3rem;
}

.h5 .swiper-wrap .text-wrap .name {
    color: #333;
    font-size: 0.4rem;
    font-weight: bold;
}

.h5 .swiper-wrap .text-wrap .desc {
    color: #666;
    font-size: 0.26rem;
    line-height: 0.48rem;
    margin: 0.2rem 0 0.3rem;
}

.h5 .swiper-wrap .text-wrap .more {
    width: 2rem;
    height: 0.6rem;
    background-color: #f5f5f5;
    border-radius: 0.3rem;
    border: solid 1px #fff;
    color: #666;
    font-size: 0.24rem;
    text-align: center;
    line-height: 0.6rem;
    margin: 0 auto;
}

.h5 .swiper-wrap .swiper-pagination {
    position: absolute;
    top: 3.2rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.h5 .swiper-wrap .swiper-pagination .swiper-pagination-bullet {
    width: 0.12rem;
    height: 0.12rem;
    margin: 0 0.05rem;
    background: #fff;
    opacity: 1;
}

.h5 .swiper-wrap .swiper-pagination .swiper-pagination-bullet-active {
    background: #e31c1c;
}





.deed {
    width: 100vw;
    height: 42.70833vw;
    background-color: transparent;
    position: relative;
    overflow: hidden;
}

.deed .banner {
    width: 100vw;
    height: 56.25vw;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: -1;
}

.deed .main {
    width: 83.33333vw;
    margin: 11.71875vw auto 0;
}

.deed .left {
    color: #fff;
}

.deed .left .baout {
    font-size: 0.72917vw;
}

.deed .left .title {
    font-weight: bold;
    font-size: 1.5625vw;
    margin: 1.45833vw 0 3.07292vw;
}

.deed .left .desc {
    font-size: 0.72917vw;
    line-height: 1.5625vw;
}

.deed .right {
    width: 35.46875vw;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.deed .right .right-top,
.deed .right .right-bottom {
    width: 100%;
    height: 50%;
    display: flex;
}

.deed .right .right-top {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.deed .right .box {
    width: 50%;
    height: 100%;
    position: relative;
    display: inline-block;
}

.deed .right .box .option {
    width: 6.25vw;
    height: 6.25vw;
    position: absolute;
    top: -webkit-calc(50% - 3.125vw);
    top: calc(50% - 3.125vw);
    left: -webkit-calc(50% - 3.125vw);
    left: calc(50% - 3.125vw);
    text-align: center;
    color: #fff;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.deed .right .box .option i {
    font-size: 2.5vw;
}

.deed .right .box .option p {
    font-size: 0.83333vw;
}

.deed .right .box .option:hover {
    background-color: #e31c1c;
    border-color: #e31c1c;
    -webkit-animation: slide1-14d4513a 0.5s ease;
    animation: slide1-14d4513a 0.5s ease;
}

@-webkit-keyframes slide1-14d4513a {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    25% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    75% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes slide1-14d4513a {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    25% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    75% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.h5 {
    font-size: 0;
    padding: 0.5rem 0.3rem;
    background: #fff;
}

.h5 .left {
    margin-bottom: 0.3rem;
}

.h5 .left .about {
    color: #999;
    font-size: 0.3rem;
}

.h5 .left .title {
    color: #333;
    font-size: 0.4rem;
    font-weight: bold;
    margin: 0.1rem 0;
}

.h5 .left .desc {
    color: #666;
    font-size: 0.26rem;
}

.h5 .right .box {
    display: inline-block;
    width: 3.3rem;
    height: 2.2rem;
    border: solid 1px #bdbdbd;
    margin-top: 0.3rem;
    text-align: center;
    padding-top: 0.3rem;
}

.h5 .right .box i {
    font-size: 0.6rem;
    color: #666;
}

.h5 .right .box p {
    color: #333;
    font-weight: 100;
    font-size: 0.36rem;
}

.h5 .right .ml30 {
    margin-left: 0.3rem;
}



.video {
    width: 100%;
    background: #fff;
    position: relative;
    overflow: hidden;
    padding-bottom: 6.19792vw;
}

.video .title-wrap {
    width: 87.5vw;
    margin: 0 auto;
}

.video .about {
    font-size: 0.72917vw;
    color: #333;
    margin: 8.28125vw 0 1.5625vw;
}

.video .name {
    font-size: 1.5625vw;
    font-weight: bold;
    color: #333;
}

.video .summary {
    font-size: 0.72917vw;
    height: 2.29167vw;
    color: #333;
    margin: 1.51042vw 0 3.07292vw;
}

.video .list {
    width: 87.5vw;
    margin: 0 auto;
    display: -webkit-box;
    display: flex;
}

.video .list .item {
    width: 27.08333vw;
    cursor: pointer;
    margin-left: 3.125vw;
    position: relative;
}

.video .list .item .img-url {
    width: 100%;
    height: 15.625vw;
}

.video .list .item .text-wrap {
    width: 100%;
    border: 1px solid #ededed;
    padding: 2.34375vw 1.5625vw 1.5625vw;
}

.video .list .item .text-wrap .time {
    font-size: 0.72917vw;
    color: #999;
}

.video .list .item .text-wrap .title-line {
    display: inline-block;
    max-width: 100%;
}

.video .list .item .text-wrap .title {
    color: #333;
    font-weight: bold;
    font-size: 0.83333vw;
    margin: 1.30208vw 0;
}

.video .list .item .text-wrap .title .line {
    width: 2.08333vw;
    height: 0.10417vw;
    background: #999;
    margin-top: 1.04167vw;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.video .list .item .text-wrap .summary {
    font-size: 0.72917vw;
    color: #666;
    line-height: 1.14583vw;
    margin: 0;
}

.video .list .item .text-wrap .detail {
    color: #666;
    font-size: 0.72917vw;
    margin-top: 1.30208vw;
}

.video .list .item .text-wrap .detail i {
    font-size: 0.52083vw;
    color: #333;
}

.video .list .item:first-child {
    margin-left: 0;
}

.video .list .item:hover .title {
    color: #e31c1c;
}

.video .list .item:hover .title .line {
    width: 100%;
    background: #e31c1c;
}

.video .list .item:hover .detail,
.video .list .item:hover .detail>i {
    color: #e31c1c;
}

.h5 {
    font-size: 0;
    padding: 0.5rem 0.3rem;
    background: #fff;
}

.h5 .title-wrap .about {
    color: #999;
    font-size: 0.3rem;
}

.h5 .title-wrap .name {
    color: #333;
    font-size: 0.4rem;
    font-weight: bold;
    margin: 0.1rem 0;
}

.h5 .title-wrap .summary {
    color: #666;
    font-size: 0.26rem;
}

.h5 .list .item {
    margin-top: 0.6rem;
}

.h5 .list .item .img-url {
    width: 6.9rem;
    height: 3.83rem;
}

.h5 .list .item .img-url img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.h5 .list .item .text-wrap {
    width: 6.9rem;
    height: 3.1rem;
    border: solid 1px #ededed;
    padding: 0.4rem 0.3rem 0 0.2rem;
}

.h5 .list .item .text-wrap .time {
    font-size: 0.2rem;
    color: #999;
}

.h5 .list .item .text-wrap .title-line .title {
    font-size: 0.3rem;
    color: #333;
    font-weight: 700;
    margin: 0.25rem 0 0.15rem;
}

.h5 .list .item .text-wrap .title-line .line {
    background: #999;
    width: 0.4rem;
    height: 0.02rem;
}

.h5 .list .item .text-wrap .summary {
    font-size: 0.24rem;
    color: #666;
    line-height: 0.36rem;
    height: 0.6rem;
    margin: 0.1rem 0 0.2rem;
}

.h5 .list .item .text-wrap .detail {
    color: #666;
    font-size: 0.24rem;
}

.h5 .list .item .text-wrap .detail i {
    font-size: 0.2rem;
    color: #333;
    font-weight: 700;
}




.friends {
    width: 100%;
    background: #fff;
    position: relative;
    overflow: hidden;
    padding-bottom: 5.9375vw;
}

.friends .wrap {
    width: 87.5vw;
    margin: 0 auto;
    height: auto;
}

.friends .title {
    color: #333;
    font-size: 1.5625vw;
    font-weight: 700;
}

.friends .list-wrap {
    margin-top: 2.03125vw;
    display: -webkit-box;
    display: flex;
}

.friends .list-wrap .list-box {
    width: 15.625vw;
    margin-right: 2.34375vw;
    cursor: pointer;
}

.friends .list-wrap .list-box img {
    width: 100%;
    border: solid 1px #eaeaea;
}

.friends .list-wrap .list-box:nth-child(5n) {
    margin-right: 0;
}

.h5 {
    /* padding: 0.5rem 0.3rem 1rem; */
    font-size: 0;
}

.h5 .title {
    font-size: 0.4rem;
    font-weight: 700;
    color: #333;
}

.h5 .list-wrap .list-box {
    width: 3.3rem;
    height: 0.88rem;
    background-color: #fff;
    border: solid 1px #eaeaea;
    display: inline-block;
    margin-top: 0.3rem;
}

.h5 .list-wrap .list-box:nth-child(2n) {
    margin-left: 0.3rem;
}

.h5 .list-wrap .list-box img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}



.index-first-box {
    background: #f5f5f5;
    padding: 5.20833vw 0;
}

.main {
    width: 100%;
    z-index: 99;
}





.Router {
    min-width: 70.83333vw;
}



@media screen and (max-width: 1000px) {

    .prev-no,
    .next-no {
        color: #999 !important;
    }

    .prev-no:active,
    .next-no:active {
        color: #999 !important;
        background: #f5f5f5 !important;
    }

    .el-message-box {
        width: 5rem;
    }

    .el-message-box .el-message-box__header .el-message-box__title span {
        font-size: 0.24rem;
    }

    .el-message-box .el-message-box__content {
        margin: 0.2rem 0;
    }

    .el-message-box .el-message-box__content .el-message-box__container .el-message-box__message p {
        font-size: 0.24rem;
        line-height: 0.3rem;
    }

    .el-message-box .el-message-box__btns .el-button {
        font-size: 0.16rem;
        padding: 0.1rem 0.3rem;
    }

    .el-message-box .el-message-box__headerbtn i {
        font-size: 0.24rem;
    }

    .el-message--error {
        padding: 0.2rem 0.4rem;
    }

    .el-message--error i {
        font-size: 0.36rem;
    }

    .el-message--error p {
        font-size: 0.24rem;
        margin-left: 0.2rem;
    }
}



.banner {
    width: 100vw;
    height: 39.58333vw;
    background-image: url(@/assets/img/home-wzxa.dd9e468f.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    overflow: hidden;
    text-align: center;
    color: #fff;
    position: relative;
}

.banner .title {
    font-weight: bold;
    font-size: 2.08333vw;
    margin: 16.66667vw 0 1.04167vw;
}

.banner .summary {
    font-size: 1.5625vw;
}


@-webkit-keyframes bounce-down-data-0c88d40a {
    25% {
        -webkit-transform: translateY(-4px);
    }

    50%,
    to {
        -webkit-transform: translateY(0);
    }

    75% {
        -webkit-transform: translateY(4px);
    }
}

@keyframes bounce-down-data-0c88d40a {
    25% {
        -webkit-transform: translateY(-4px);
    }

    50%,
    to {
        -webkit-transform: translateY(0);
    }

    75% {
        -webkit-transform: translateY(4px);
    }
}





@-webkit-keyframes slide1-3da1f24d {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    25% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    75% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes slide1-3da1f24d {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    25% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    75% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}



.h5 .title {
    color: #333;
    font-size: 0.4rem;
    font-weight: 700;
    text-align: center;
    margin: 0.7rem 0 0.5rem;
}

.h5 .main {
    padding: 0 0.3rem;
}

.h5 .main .classify {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
}

.h5 .main .classify .list-box {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    margin: 0 0.15rem;
}

.h5 .main .classify .list-box .num {
    color: #e31c1c;
    font-weight: Bold;
    font-size: 0.48rem;
}

.h5 .main .classify .list-box .name {
    color: #666;
    font-size: 0.2rem;
}

.h5 .main .main-desc {
    width: 100%;
    padding: 0 0.05rem;
    margin: 0.5rem auto 0.7rem;
    color: #333;
    font-size: 0.24rem;
    text-align: center;
    line-height: 0.36rem;
}

.h5 .main .main-desc span {
    text-align: center;
    white-space: nowrap;
    display: block;
}

.h5 .main .main-desc span:nth-child(2) {
    width: 50%;
    width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    margin: auto;
}

.h5 .main .main-desc .more {
    display: inline-block;
    cursor: pointer;
}

.h5 .main .list-wrap {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    flex-wrap: wrap;
}

.h5 .main .list-wrap .list-box {
    width: 2.1rem;
    height: 1.6rem;
    background-color: rgba(255, 255, 255, 0.7);
    overflow: hidden;
    text-align: center;
    cursor: pointer;
    margin-bottom: 0.3rem;
}

.h5 .main .list-wrap .list-box:first-child {
    margin-left: 0;
}

.h5 .main .list-wrap .list-box .icon {
    font-size: 0.4rem;
    margin: 0.3rem 0 0.05rem;
}

.h5 .main .list-wrap .list-box .name {
    color: #333;
    font-size: 0.26rem;
}

.h5 .main .list-wrap .list-box:nth-child(3n-1) {
    margin: 0 0.3rem;
}




.scenic-list {
    width: 100%;
}

.scenic-list .title {
    text-align: center;
    font-size: 1.5625vw;
    font-weight: bold;
    color: #333;
    margin: 5.72917vw 0 2.60417vw;
}

.scenic-list .list-wrap {
    width: 87.5vw;
    margin: 0 auto 3.125vw;
}

.scenic-list .list-wrap .list-box {
    display: inline-block;
    width: 27.08333vw;
    margin-left: 3.125vw;
    cursor: pointer;
}

.scenic-list .list-wrap .list-box:first-child {
    margin-left: 0;
}

.scenic-list .list-wrap .list-box .img-url {
    width: 27.08333vw;
    height: 15.625vw;
    position: relative;
}

.scenic-list .list-wrap .list-box .img-url .mask {
    width: 100%;
    height: 100%;
    position: relative;
    display: none;
    background: rgba(0, 0, 0, 0.3);
}

.scenic-list .list-wrap .list-box .img-url .mask i {
    font-size: 1.66667vw;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.scenic-list .list-wrap .list-box .text-wrap {
    width: 27.08333vw;
    height: 4.16667vw;
    text-align: center;
    line-height: 4.16667vw;
    background-color: #f5f5f5;
    color: #333;
    font-size: 0.83333vw;
}

.scenic-list .list-wrap .list-box:hover .mask {
    display: block;
}

.scenic-list .list-wrap .list-box:hover .text-wrap {
    color: #e31c1c;
}

.h5 {
    font-size: 0;
}

.h5 .title {
    font-weight: 700;
    font-size: 0.4rem;
    color: #333;
    margin: 1rem 0 0.6rem;
    text-align: center;
}

.h5 .list-wrap {
    width: 100%;
    padding: 0 0.3rem;
}

.h5 .list-wrap .list-box {
    margin-bottom: 0.6rem;
}

.h5 .list-wrap .list-box .img-url {
    width: 100%;
    height: 3.83rem;
}

.h5 .list-wrap .list-box .mask {
    display: none;
}

.h5 .list-wrap .text-wrap {
    background: #f5f5f5;
    width: 100%;
    height: 1rem;
    font-weight: 700;
    font-size: 0.3rem;
    color: #333;
    text-align: center;
    line-height: 1rem;
}

.h5 .more-btn {
    margin: 0.6rem auto 1rem;
    width: 2rem;
    height: 0.6rem;
    background: #f5f5f5;
    border-radius: 0.3rem;
    line-height: 0.6rem;
    text-align: center;
    color: #666;
    font-size: 0.24rem;
}
.img-url {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

@media(max-width:1000px) {
    .index-banner .scenic-area.scenic-h5 .next,.index-banner .scenic-area.scenic-h5 .prev{
        display: none;
    }
    .h5 .wrap1,.h5 .wrap2{
        display: none;
    }
 
   /* .index-banner .scenic-area.scenic-h5{
    bottom: 1.20833vw;
} */
.h5 .right-side-list .consult{
    display: block;
    width: 0.8rem;
    height: 0.8rem;
    background: #e5e5e5;
    text-align: center;
    line-height: 0.8rem;
    border-radius: 0.1rem;
    margin-bottom: 0.1rem;
}
.index-banner .video{
    padding: 0;
}

.swiper-pagination-bullet{
    width: 0.12rem !important;
    height: 0.12rem !important;
    margin: 0 0.05rem !important;
    background: #fff !important;
    opacity: 1; 
}
 .swiper-pagination-bullet-active{
    background-color: #e31c1c !important;
}
.recommended-item{
    height: 3.65rem !important;
}
.recommend-pic{
    width: 6.9rem !important;
    height: 3.65rem !important;
    margin-right: 0 !important;
}
.main .wrap{
    height: auto;
}
.wrap .main{
  padding: 1rem 0.3rem 0.5rem !important; 
  width: auto !important;
  margin: 0 !important;
}
.scenic-recommended-list .text-wrap{
    text-align:center;
}
.scenic-recommended-list .text-wrap .about{
    margin: 0.55rem 0 0.1rem;
    color: #999;
    font-size: 0.3rem;
}
.scenic-recommended-list .text-wrap .name{
    color: #333;
    font-size: 0.4rem;
    font-weight: bold;  
}
.scenic-recommended-list .text-wrap .desc{
    color: #666;
    font-size: 0.26rem;
    line-height: 0.48rem;
    margin: 0.2rem 0 0.3rem;  
}
.scenic-recommended-list .text-wrap .more{
    width: 2rem;
    height: 0.6rem;
    background-color: #f5f5f5;
    border-radius: 0.3rem;
    border: solid 1px #fff;
    color: #666;
    font-size: 0.24rem;
    text-align: center;
    line-height: 0.6rem;
    margin: 0 auto;
}
.deed .left{
    margin-bottom:0.3rem;  
}
.deed{
    height: auto;
}
.deed .main{
    font-size: 0;
    padding: 0.5rem 0.3rem;
    background: #fff;
    width: auto;
    margin: 0;
}
.deed .right{
    width: auto;
    height: auto;
    position: static;
}
.deed .right .ml30{
    margin-left: 0.3rem;
}
.deed  .right .box{
    display: inline-block;
    width: 3.3rem;
    height: 2.2rem;
    border: solid 1px #bdbdbd;
    margin-top: 0.3rem;
    text-align: center;
    padding-top: 0.3rem; 
}
.deed .right .box i{
    font-size: 0.6rem !important;
    color: #666;
}
.deed .right .box p{
    color: #333;
    font-weight: 100;
    font-size: 0.36rem !important;
}
.deed .right .box .option{
    width: 100%;
    height: 100%;
    position: static;
}
.deed .right .box .option:hover{
    background-color: #fff;
    border: none;
    animation:none;
}
.deed .left .about{
    color: #999;
    font-size: 0.3rem;
}
.deed .left .title{
    color: #333;
    font-size: 0.4rem;
    font-weight: bold;
    margin: 0.1rem 0;
}
.deed .left .desc{
    color: #666;
    font-size: 0.26rem;
    line-height: normal;
}
.video .title-wrap .about{
    color: #999;
    font-size: 0.3rem;
    margin: 0;
}
.video .title-wrap{
    margin: 0;
    width: auto;
}
.video .list{
    margin: 0;
}
.video .title-wrap .name{
    color: #333;
    font-size: 0.4rem;
    font-weight: bold;
    margin: 0.1rem 0;
}
.video .title-wrap .summary{
    color: #666;
    font-size: 0.26rem;
    height: auto;
}
.video{
    font-size: 0;
    padding: 0.5rem 0.3rem;
    background: #fff;
}
.video .list {
    display: block;
    width: 100%;
}
.video .list .item {
    margin-top: 0.6rem;
}
.video .list .item .img-url{
    width: 6.9rem;
    height: 3.83rem;
}
.video .list .item .img-url img{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover; 
}
.video .list .item .text-wrap{
    width: 6.9rem;
    height: 3.1rem;
    border: solid 1px #ededed;
    padding: 0.4rem 0.3rem 0 0.2rem;
}
.video .list .item .text-wrap .time{
    font-size: 0.2rem;
    color: #999;
}
.video .list .item .text-wrap .title-line .title{
    font-size: 0.3rem;
    color: #333;
    font-weight: 700;
    margin: 0.25rem 0 0.15rem;
}
.video .list .item .text-wrap .title-line .line{
    background: #999;
    width: 0.4rem;
    height: 0.02rem;
}
.video .list .item .text-wrap .summary{
    font-size: 0.24rem;
    color: #666;
    line-height: 0.36rem;
    height: 0.6rem;
    margin: 0.1rem 0 0.2rem;
}
.video .list .item{
    width: auto;
    margin-left: 0;
}
.video .list .item .text-wrap {
    text-align: left;
}
.video .list .item .text-wrap .detail{
    color: #666;
    font-size: 0.24rem;
}
.video .list .item .text-wrap i{
    font-size: 0.2rem !important;
    color: #333 !important;
    font-weight:400;
}
.friends .wrap{
    padding: 0.5rem 0.3rem 1rem;
    font-size: 0;
    display: block;
    height: auto;
    margin: 0;
    width: auto;
}
.friends .title{
    font-size: 0.4rem;
    font-weight: 700;
    color: #333;
    margin: 0;
    text-align: left;
}
.friends .list-wrap{
    padding: 0;
    display: block;
    margin-top: 0;
}
.friends .list-wrap .list-box{
    width: 3.3rem;
    height: 0.88rem;
    background-color: #fff;
    border: solid 1px #eaeaea;
    display: inline-block;
    margin-top: 0.3rem;
    margin-right: 0;
}
.friends .list-wrap .list-box:nth-child(2n){
    margin-left:0.3rem; 
}
.friends .list-wrap .list-box img{
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;  
}
}


</style>